<template>
	<view>
		<view class='px-3-1 top color-white pb-9 mb-9 relative'>
			<view class='flex flex-row py-3'>
				<view class='mr-2-2'>
					<image src="/static/login/login-bg.png" class='w-11 h-11'></image>
				</view>
				<view class='flex-1'>
					<view class='flex flex-row items-center mb-1-1'>
						<text class='text-xl mr-2 font-medium'>梦想的天空</text>
						<image src="/static/member/medal-3.png" class='w-3-3 h-3-3'></image>
						<text class='text-n font-xsmall'>金牌会员</text>
					</view>
					<view>
						<text class='text-n font-xsmall'>开通会员，畅想好内容！</text>
					</view>
				</view>
				<view @click="toDetail">
					<text class="iconfont icon-edit text-xxl"></text>
				</view>
			</view>
			<view class='pb-3-1'>
				<text class='text-n font-xsmall'>
					李四，男，于2001年获得应用数学博士学位教授、博士生导师，教育部新世纪优秀人…
				</text>
			</view>
			<view class="flex flex-row items-center pb-5 leading-3-3">
				<view class="b-solid-thin b-white rounded-xl px-1-3 mr-1-3">
					<text class='text-s font-xsmall'>优秀讲师</text>
				</view>
				<view class="b-solid-thin b-white rounded-xl px-1-3 mr-1-3">
					<text class='text-s font-xsmall'>优秀讲师</text>
				</view>
				<view class="b-solid-thin b-white rounded-xl px-1-3 mr-1-3">
					<text class='text-s font-xsmall'>优秀讲师</text>
				</view>
			</view>
			<view class="bar absolute bg-white rounded-l flex items-center color-main">
				<view class='text-center w-p-25 flex flex-column flex-center' hover-class="bg-2" hover-start-time="0" 
					hover-stay-time="100" v-for="el in myData" :key="el.name" @click="toPage(el)">
					<image :src="el.img" class="w-8-4 h-8-4"></image>
					<text class='mt-0-4 text-s'>{{el.name}}</text>
				</view>
			</view>
		</view>
		<view class="pt-6-2">
			<self-list-item title="我的关注" icon="icon-tubiaozhizuomoban-"/>
			<self-list-item title="我的关注" icon="icon-tubiaozhizuomoban-"/>
			<self-list-item title="我的关注" icon="icon-tubiaozhizuomoban-"/>
			<self-list-item title="我的关注" icon="icon-tubiaozhizuomoban-"/>
		</view>
	</view>
</template>

<script>
	import SelfListItem from "@/components/common/SelfListItem.vue";
	export default {
		components: {
			SelfListItem
		},
		setup(){
			function toDetail(){
				uni.navigateTo({
					url: "/pages/personal-info/personal-info"
				});
			}
			const myData = [
				{name: "我的活动",url: "/pages/my-activity/my-activity",img: "/static/me/activity.png"},
				{name: "我的主页",url: "",img: "/static/me/home.png"},
				{name: "我的草稿",url: "",img: "/static/me/caogao.png"},
				{name: "我的消息",url: "",img: "/static/me/message.png"},
			];
			function toPage(el){
				if(el.url){
					uni.navigateTo({
						url: el.url
					})
				}
			}
			return {
				toDetail,
				myData,
				toPage
			};
		}
	}
</script>

<style>
	.top{
		background: linear-gradient(180deg, #80E7E6 0%, #4ED0CF 100%);
	}
	.bar{
		left:32rpx;
		right:32rpx;
		bottom: -90rpx;
		height: 180rpx;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}
	.bar .flex{
		height: 180rpx;
	}
</style>
